<script setup>


import {getCurrentInstance, h, onMounted, ref} from "vue";
import api from "@/request/apis.js";
import ProcessRelationConfig from "@/views/process/ProcessRelationConfig.vue";
import ProcessRun from "@/views/process/ProcessRun.vue";

const {proxy} = getCurrentInstance();
const refresh = () => {
  queryList();
}
const save = async () => {
  if (jobConfig.value.id) {
    const s = await api.updateJobConfigById(jobConfig.value);
  } else {
    const s = await api.jobConfigAdd(jobConfig.value);
  }
  jobConfig.value = {}
  jobConfig.value.visible = false;
  refresh();
}
const jobConfig = ref({
  visible: false
});
const queryList = async () => {
  tableData.value = await api.queryJobConfigList();

}
const processRelationVisible = ref(false);
const tableData = ref([]);
const views = async (row) => {
  const a = await api.getJobConfigById(row.id);
  jobConfig.value = a;
  jobConfig.value.visible = true;
}

const processRunFlag = ref(false);
const edit = async (row) => {
  const a = await api.getJobConfigById(row.id);
  jobConfig.value = a;
  jobConfig.value.visible = true;
}
onMounted(() => {
  refresh();
})
const remove = async (row) => {
  const a = await api.removeById(row.id);
  refresh();
}
const runOne = async (row) => {
  // const a = await api.runOneById(row.id);
  // refresh();

  processRunFlag.value = true;
  bizId.value = null;
  setTimeout(() => {
    bizId.value = row.id;
  }, 0)
}
const run = async (row) => {
  const a = await api.run(row.id);
  refresh();
}
const stop = async (row) => {
  const a = await api.stop(row.id);
  refresh();
}
const nextFireTime = async (row) => {
  const a = await api.nextFireTime(row.id);
  proxy.$notify({
    title: '提示',
    message: h('i', {style: 'color: teal'}, a)
  });
}

const bizId = ref();
const relationProcess = (row) => {
  bizId.value = row.id;
  processRelationVisible.value = true;

}
</script>

<template>


  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <el-button @click="refresh" type="primary" size="small">刷新</el-button>
          <el-button @click="jobConfig.visible=true;" type="primary" size="small">新增</el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                fixed
                prop="jobName"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="jobCode"
                label="编码">
            </el-table-column>
            <el-table-column
                prop="jobDescription"
                label="描述">
            </el-table-column>
            <el-table-column
                prop="cron"
                label="cron"
                width="180">
            </el-table-column>
            <el-table-column
                prop="state"
                label="state"
            >
              <template #default="scope">
                <el-tag
                    :type="scope.row.state == '1' ? '运行' : scope.row.state == '2'?'暂停':''"
                    disable-transitions
                >{{ scope.row.state == '1' ? '运行' : scope.row.state == '2' ? '暂停' : '' }}
                </el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
                prop="modifyTime"
                label="最后修改日期"
                width="180">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="380">
              <template #default="scope">
                <el-button @click="views(scope.row)" type="default" size="small">查看</el-button>
                <el-button @click="edit(scope.row)" type="default" size="small">修改</el-button>
                <el-button type="default" size="small" @click="remove(scope.row)">删除</el-button>
                <el-button type="default" size="small" @click="runOne(scope.row)">运行一次</el-button>
                <el-button type="default" size="small" @click="run(scope.row)">运行</el-button>
                <el-button type="default" size="small" @click="stop(scope.row)">停止</el-button>
                <el-button type="default" size="small" @click="nextFireTime(scope.row)">下次执行时间</el-button>
                <el-button type="default" size="small" @click="relationProcess(scope.row)">关联流程</el-button>

              </template>
            </el-table-column>
          </el-table>

        </el-col>
      </el-row>


    </el-main>
  </el-container>

  <el-dialog v-model="jobConfig.visible" width="300px">
    <el-form :model="jobConfig">
      <el-form-item label="名称">
        <el-input v-model="jobConfig.jobName" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="编码">
        <el-input v-model="jobConfig.jobCode" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="cron">
        <el-input v-model="jobConfig.cron" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="jobConfig.jobDescription" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="参数">
        <el-input v-model="jobConfig.params" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="jobConfig.visible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog v-model="processRelationVisible" width="1000px">
    <ProcessRelationConfig :biz-id="bizId" biz-type="JOB"></ProcessRelationConfig>
  </el-dialog>

  <el-dialog v-model="processRunFlag" width="1000px">
    <ProcessRun v-if="processRunFlag" :biz-id="bizId" biz-type="JOB"></ProcessRun>
  </el-dialog>


</template>

<style scoped>

</style>